<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
</head>

<body>
    <button id="handle">测试不做函数节流/防抖</button>
    <button id="throttle">测试函数节流</button>
    <button id="debounce">测试函数防抖</button>
    <script>
        /* 
    节流的工具函数
      如果当前事件发生的时间与上一次处理的时间差大于指定的时间, 才调用回调处理
    */

        const test1 = document.getElementById('handle')
        const test2 = document.getElementById('throttle')
        const test3 = document.getElementById('debounce')
        test2.onclick = throttle(() => {
            console.log(111)
        }, 5000)


        function throttle(callback, time) {
            let pre = 0; // 用来保存处理事件的时间
            return function (e) {
                const now = Date.now() //当前事件发生的时间
                // console.log(now - pre, time);
                //时间差要大于time,才调用
                if (now - pre > time) {
                    //调用回调处理:要通过call来指定this和参数
                    callback.call(this, e)
                    //记录最新的处理时间
                    pre = now
                }
            }
        }

        function fn(callback, time) {
            let pre = 0
            return function (e) {
                const now1 = Data.now()
                if (now1 - pre > time) {
                    callback(this, e)
                    pre = now
                }
            }
        }

        function fn1(callback, time) {
            let timeoutId;
            return function (e) {
                if (timeoutId) {
                    clearTimeout(timeoutId)
                }
                timeOutId = setTimeout(() => {
                    callback(this, e)
                    timeoutId = null
                }, time)
            }
        }
        /* 
        防抖的工具函数
        */
        function debounce(callback, time) {
            // 用来保存一个待执行延迟任务(定时器)
            let timeoutId
            return function (e) {
                // 将前面已经但还未执行的调用回调的延迟任务给取消
                if (timeoutId) {
                    clearTimeout(timeoutId);
                }
                //启动一个新的定时器,准备执行回调处理,将保存定时器的id
                timeoutId = setTimeout(() => {
                    //调用回调处理
                    callback.call(this, e)
                    //重置定时器id
                    timeoutId = null
                }, time);
            }
        }
    </script>
</body>

</html>